<template>
    <view>
        <view class="top">
            <view class="group">
                <view class="flex aic">
                    <view class="nav">
                        <image :src="userInfo.avatar_file.url" mode="aspectFill"
                            v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url"></image>
                        <image src="../../static/images/user-default.jpg" mode="aspectFill" v-else></image>
                    </view>
                    <view @click="toUser">
                        <view class="mgl20 cf" v-if="hasLogin">
                            <view class="nameLimit" @click="toUser">
                                <text v-if="hasLogin">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</text>
                                <text v-else>匿名</text>
                            </view>
                            <uni-dateformat :date="userInfo.register_date" :threshold="[3600,99*365*24*60*60*1000]"
                                v-if="hasLogin"></uni-dateformat>注册
                        </view>
                        <view class="mgl20" v-else>
                            <view class="nameLimit">点击登录</view>
                        </view>
                    </view>
                </view>
                <view class="cf fs36"><van-icon name="arrow" /></view>
            </view>
            <view class="bg">
                <image :src="userInfo.avatar_file.url" mode="aspectFill"
                    v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url"></image>
                <image src="../../static/images/user-default.jpg" mode="aspectFill" v-else></image>
            </view>
        </view>
        <view class="main">
            <view class="fs28 flex">
                <view class="c9 mgr10"><text class="fwb c0">{{ userobj.zan  }}</text>获赞</view>
                <view class="c9 mgr10"><text class="fwb c0">5</text>评论</view>
                <view class="c9"><text class="fwb c0">{{ userobj.art  }}</text>发文</view>
            </view>
            <view class="mgt20 list">
                <view class="group">
                    <view class="item" @click="topage('/pages/fyquanzi_art/list')">
                        <view class="flex aic">
                            <van-icon name="completed-o" />
                            <view class="fs32 mgl10">我的长文</view>
                        </view>
                        <van-icon name="arrow" />
                    </view>
                    <view class="item" @click="topage('/pages/quanzi_like/list')">
                        <view class="flex aic">
                            <van-icon name="good-job-o" />
                            <view class="fs32 mgl10">我的点赞</view>
                        </view>
                        <van-icon name="arrow" />
                    </view>
                    <view class="item">
                        <view class="flex aic">
                            <van-icon name="edit" />
                            <view class="fs32 mgl10">评论过的</view>
                        </view>
                        <van-icon name="arrow" />
                    </view>
                </view>
                <view class="group">
                    <view class="item">
                        <view class="flex aic">
                            <van-icon name="comment-o" />
                            <view class="fs32 mgl10">关于</view>
                        </view>
                        <van-icon name="arrow" />
                    </view>
                    <view class="item" @click="topage('/uni_modules/uni-feedback/pages/opendb-feedback/list')">
                        <view class="flex aic">
                            <van-icon name="comment-circle-o" />
                            <view class="fs32 mgl10">意见反馈</view>
                        </view>
                        <van-icon name="arrow" />
                    </view>
                </view>
                <view class="group">
                    <view class="item" @click="logOut">
                        <view class="flex aic">
                            <van-icon name="revoke" />
                            <view class="fs32 mgl10">退出登录</view>
                        </view>
                        <van-icon name="arrow" />
                    </view>
                </view>

            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        store,
        mutations
    } from '@/uni_modules/uni-id-pages/common/store.js'
    import {
        computed,
        onMounted,
        reactive
    } from 'vue';
    const db = uniCloud.database()
    let userInfo = computed(() => {
        return store.userInfo;
    })
    let hasLogin = computed(() => {
        return store.hasLogin;
    })

    //获取点赞评论发文
    let userobj = reactive({});
    async function getData() {
        if (!hasLogin.value) return;
        let artcount = await db.collection('fyquanzi_art').where(` user_id==$cloudEnv_uid`).count();
        userobj.art = artcount.result.total;
        let zancount = await db.collection('fyquanzi_art').where(` user_id==$cloudEnv_uid`).groupBy(
            'user_id').groupField('sum(like_count) as like').get();
        userobj.zan = zancount.result.data[0].like

    }

    //退出登录
    function logOut() {
        if (isLogin()) return;
        uni.showModal({
            title: '是否退出登录?',
            success: res => {
                if (res.confirm) {
                    mutations.logout();
                }
            }
        })
    }

    function isLogin() {
        if (!hasLogin.value) {
            uni.showToast({
                title: '未登录',
                icon: "none"
            })
            return true;
        }
        return false;
    }
    // 跳转
    function topage(url) {
        if (isLogin()) return;
        uni.navigateTo({
            url
        })
    }

    function toUser() {
        uni.navigateTo({
            url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
        })
    }
    onMounted(() => {
        getData();
    })
</script>

<style lang="scss" scoped>
    .top {
        padding-top: var(--status-bar-height);
        position: relative;

        .group {
            // flex aic fs24 pd40 jcsb
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            padding: 80rpx 40rpx;

            .nav {
                width: 100rpx;
                height: 100rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }

        .bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;

            image {
                width: 100%;
                height: 100%;
                filter: blur(20px);
                transform: scale(2);
                opacity: 2;
            }
        }

        .nameLimit {
            font-size: 42rpx;
            font-weight: bold;
            color: white;
            max-width: 300rpx;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
        }
    }

    .main {
        padding: 35rpx;
        border-radius: 50rpx;
        z-index: 100;
        background-color: #fff;
        transform: translate(0, -20px);

        .list {
            .group {
                border-bottom: 3px solid #eee;

                .item {
                    padding: 20rpx 0;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                &:last-child {
                    border-bottom: none;
                }
            }
        }
    }
</style>